<template>
	<div class="container">
		<div class="header">
			<p style="text-align: center">分类</p>
		</div>
		<div class="content">
			<div class="left hidescroll">
				<ul class="list-main">
					<li v-for="item in listMain" :key="item.id" @click="activeId = item.id">
						<span :class="{ active: item.id === activeId }" v-text="item.name"></span>
					</li>
				</ul>
			</div>
			<div class="right">
				<img :src="avatar" alt="" class="logo1">
				<ul v-if="listSub.length > 0" class="list-sub">
					<li v-for="item in listSub" :key="item.id">
						<router-link :to="/list/ + item.id">
							<img :src="item.avatar" alt="">
							<span class="span" v-text="item.name"></span>
						</router-link>
					</li>
				</ul>
				<p v-else>暂无相关商品，敬请期待。。。</p>
			</div>
		</div>
		<div class="footer2">
			<MiNav></MiNav>
		</div>
	</div>
</template>
<script>

import MiNav from "../../components/MiNav/MiNav"
import { CategoryApi } from '../../api'

export default {
	components: { MiNav },
	name: "category",
	//注册子组件
	data() {
		return {
			listMain: [],
			listSub: [],
			activeId: 0
		};
	},

	computed: {

		avatar: function () {
			return this.activeId > 0 ? this.listMain.find(item => item.id === this.activeId).avatar : "";
		}
	},
	methods: {

		async getData(fid) {
			try {
				const result = await CategoryApi.getList(fid)
				if (this.activeId === 0) {
					this.listMain = result;
					this.activeId = result[0].id;
				} else {
					this.listSub = result
				}
			} catch (e) {/**/
			}
		}

	},
	watch: {
		activeId: {
			handler: function (newValue) {
				this.getData(newValue);
			},
			immediate: true
		}
	}
};
</script>
<style scoped>
* {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.hidescroll::-webkit-scrollbar {
	display: none
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	height: 45px;
	flex-shrink: 0;
}

.content {
	flex-grow: 1;
	display: flex;
	border-top: 1px solid #b0b0b0;
	border-bottom: 1px solid #b0b0b0;
	overflow: hidden
}

.left {
	width: 90px;
	flex-shrink: 0;
	overflow: auto
}

.right {
	flex-grow: 1;
	border-left: 1px solid #b0b0b0;
	overflow: auto;
	padding: 5px;
}

.logo1 {
	width: 100%;
}

.footer2 {
	flex-shrink: 0;
}

ul.list-main li {
	height: 45px;
	display: flex;
	padding: 0 12px;
	align-items: center;

}

ul.list-main span {
	flex-grow: 1;
	font-size: 14px;
	text-align: center;
	height: 26px;
	line-height: 26px;
	border-radius: 13px;
}

ul.list-main span.active {
	color: white;
	background-color: orange;
}

.list-sub {
	width: 73vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.list-sub li {
	width: 19vw;
	margin-left: 10px;
	margin-top: 10px;
	text-align: center;
}

.list-sub li img {
	width: 69px;
}

.span {
	color: #696969;
}
</style>